<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <meta name="author" content="林镭特" />
    <title></title>
   
    <style>
      main {
        width: 500px;
        margin: 0 auto;
      }
      div {
        width: 150px;
        height: 150px;
        background-color: black;
        transition: all 1s;
      }
    </style>
  </head>
  <body>
    <!-- 1.控制div属性 -->
    <main>
      <button onclick="">变宽</button>
      <button onclick="">变高</button>
      <button onclick="">变色</button>
      <button onclick="">隐藏</button>
      <button onclick="">重置</button>
      <div></div>
    </main>

    <script>
      //div.style = "width: 150px;height: 150px;background-color: black;";
      // button[0].onclick = function() {
      //   div.style.width = "250px";
      // };
      // button[1].onclick = function() {
      //   div.style.height = "250px";
      // };
      // button[2].onclick = function() {
      //   div.style.backgroundColor = "red";
      // };
      // button[3].onclick = function() {
      //   div.style.display = "none";
      // };
      // button[4].onclick = function() {
      //   div.style = "width: 150px;height: 150px;background-color: black;";
      // };

      var div = document.querySelector("div");
      var button = document.querySelectorAll("button");
      var arr = ["width", "height", "backgroundColor", "display", "cssText"];
      var values = ["300px", "300px", "red", "none", " "];
      for (var i = 0; i < button.length; i++) {
        button[i].index = i;
        button[i].onclick = function() {
          div.style[arr[this.index]] = values[this.index];
        };
      }
    </script>
    
  </body>
</html>
